<template>
  <q-dialog v-model="showChildsDig">
    <ListChildPrinter v-if="props.part_id" :parent_part_id="props.part_id" :qrcode_size="size" :cews_size="cews"></ListChildPrinter>
  </q-dialog>
  <MyDialog title="Print QR Code">
    <div class=" items-center justify-evenly q-pa-md">
      <!-- <example-component
        title="Example component"
        active
        :todos="todos"
        :meta="meta"
      ></example-component> -->
      <!-- <div class="text-h3">Print From Image</div> -->
      <img :src="QRImage" ref="myimage"/><br>
      <div class="q-pa-md">
        <q-badge color="secondary">
          QR Code size:
        </q-badge>

        <div class="q-gutter-sm">
          <q-radio  v-model="size" :val="60" label="8 mm" />
          <q-radio  v-model="size" :val="80" label="10 mm" />
          <q-radio  v-model="size" :val="90" label="12 mm" />
        </div>

        <!-- <q-slider
          :model-value="qrcode"
          @change="val => { qrcode = val }"
          :min="60"
          :max="90"
          :step="5"
          color="secondary"
          label
        /> -->
        <!-- <q-badge color="orange">
          CEWS Logo: {{ cews }}
        </q-badge> -->

        <!-- <q-slider
          :model-value="cews"
          @change="val => { cews = val }"
          :min="16"
          :max="24"
          :step="1"
          color="orange"
          label
        /> -->
      </div>
      <q-btn label="BT Print" class="q-ma-sm default-btn" @click="printImageEle" />
      <q-btn label="PC Print" class="q-ma-sm default-btn" @click="pcPrint" />
      <q-btn v-if="is_parent" label="Print Child" class="q-ma-sm blue-btn" @click="showChildsDig = true" />

     
      <!-- <br> -->
      <!-- <q-separator    spaced="" />
      <div class="text-h3">Print From Canvas</div>
      <canvas ref="mycanvs" width="200" height="64" id="mycanvas"></canvas>

      <q-input v-model="text" type="textarea" label="text" filled />
      <q-btn label="Print" @click="printCanvas" /> -->


    </div>
  </MyDialog>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import {  getBluetooth, bluetoothPrintImageData, getImageData } from 'src/libs/blePrinter'
import MyDialog from 'src/components/container/MyDialog.vue';
import ListChildPrinter from './ListChildPrinter.vue'
import {getPartDetailData, getQrcode} from 'src/services/partsService'
import {getLocationQrcode } from 'src/services/qrMapLocationService';
import { resolveDjangoUrl } from 'src/boot/axios';

const props = defineProps<{
  part_id?: number,
  qr_location_id?: number
}>()

const text = ref('')
const QRImage = ref(null)
const mycanvs = ref<HTMLCanvasElement>()
const myimage = ref<HTMLImageElement>()

// const qrcode = ref(90)
const size = ref(90)
const cews = ref(24)

const is_parent = ref()
const stock_code = ref()
const serial_no = ref()

const showChildsDig = ref(false)

async function printImageEle(){
  const ble = await getBluetooth()
  const imageData = getImageData(myimage.value!,192, 104 )
  await bluetoothPrintImageData(ble,imageData!)
}


function pcPrint() {
  if (props.part_id){
    window.open(`${resolveDjangoUrl()}/cews/qrcode/${props.part_id}`);
  }
  if (props.qr_location_id){
    window.open(`${resolveDjangoUrl()}/cews/location_qrcode/${props.qr_location_id}`);
  }
}

watch(()=>text.value,async (v)=>{
  // draw text to mycanvas, text is a text area
  const ctx = mycanvs.value?.getContext('2d')
  if (!ctx) return
  const width = mycanvs.value?.width || 0
  const height = mycanvs.value?.height  || 0
  ctx.clearRect(0,0,width,height)
  ctx.fillStyle = '#ffffff'
  ctx.fillRect(0,0,width,height)
  ctx.fillStyle = '#000000'
  const fontsize = 24
  // font size 16
  ctx.font = `${fontsize}px serif`
  text.value.split('\n').forEach((line,i)=>{
    ctx.fillText(line,0,fontsize+i*fontsize)
  })
  
})

async function printCanvas(){
  if (!mycanvs.value) return
  // const mycanvas2 = document.getElementById('mycanvas') as HTMLCanvasElement
  // const ctx = mycanvas2.getContext('2d')
  const ctx = mycanvs.value.getContext('2d')
  if (!ctx) return
  const ble = await getBluetooth()
  const imageData = ctx.getImageData(0,0,mycanvs.value.width,mycanvs.value.height)
   bluetoothPrintImageData(ble,imageData)
}

async function init() {

  if (props.part_id){
    const res = await getQrcode(props.part_id, size.value, cews.value)
    QRImage.value = `data:image/png;base64, ${res.data.data.encoded_image}`

    const part =  await getPartDetailData(props.part_id)
    is_parent.value = part.data.is_parent
    stock_code.value = part.data.stock_code
    serial_no.value = part.data.serial_no
    
  }
  if (props.qr_location_id){
    const res = await getLocationQrcode(props.qr_location_id, size.value, cews.value)
    QRImage.value = `data:image/png;base64, ${res.data.encoded_image}`
  }
}

init()

watch(size,(new_size)=>{
  console.log(new_size);
  
  if (new_size == 90){
    cews.value = 24
  }
  if (new_size == 80){
    cews.value = 20
  }
  if (new_size == 60){
    cews.value = 16
  }
  init()
})

onMounted(async () => {
  return
})

</script>
